<template>
	<view class="box bg-f7">
		<view>
			<video :src="BASE_URL + info.video_file" :title="info.title" controls autoplay></video>
		</view>
		<view class="margin-b-20 bg-white title-box">
			<view class="title margin-b-20">
				{{info.title}}
			</view>
			<view class=" type-box">
			    <text  >{{info.tag}}</text>
			</view>
		</view>
		<view class="bg-white knowledge-box">
			<view class="knowledge-title padding-30 fs-32 color-0 fw-b">
				{{title}}
			</view>
			<view>
				 <u-parse :content="info.content"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
import {learnDetail} from '@/api/healthPassbook'
import $baseUrl from "@/config/index.js"
const BASE_URL = $baseUrl.baseUrl
	export default {
		data() {
			return {
                BASE_URL,
                id:'',
				info:{  },
				title :"肠胃病知识",
				content:  ''
            }
		},
        onLoad(e) {
			this.id = e.id
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:'健康科普学习'
			})
            this.getDetails()
		},
		methods: {
			getDetails(){
                learnDetail({learn_id:this.id}).then(res=>{
                    this.info = res.data
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.type-box {
	   text{
	       height: 34rpx;
	       padding: 0 8rpx;
	       background: rgba(67,171,196,0.08);
	       line-height:  34rpx;
	       border-radius: 4rpx;
	       color:  #43ABC4;
	       font-size: 22rpx;
	       border: 1px solid #43ABC4;
	   }
	}
	.title-box {
		padding:20rpx 30rpx 27rpx;
	}
	.knowledge-title {
		position: relative;
		&:before{
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			width: 6rpx;
			height: 24rpx;
			background: #43ABC4;
			transform: translateY(-50%);
		}
	}
</style>
